<template>
  <div class="vip">
    <div class="vip-box">
      <div class="vip-content">
        <avue-data-pay :option="option"></avue-data-pay>
      </div>

      <el-dialog :visible.sync="box"
                 width="60%">获取
        <center>
          <el-tag type="danger">
            扫描二维码完成付款,付款完成后，我们会尽快为您开通账号权限，并且及时会有客服与您联系,这段期间请一定要看一下企业须知
          </el-tag>
          <h1 class="title">
            <p>付款一定要备注QQ号码</p>
          </h1>
          <img src="/images/zfb.png"
               style="margin:20px auto"
               width="300px"
               alt="">
          <img src="/images/wx.jpg"
               style="margin:20px auto"
               width="300px"
               alt="">
          <h2>
            <router-link to="/doc/vip?key=0">付款后点击我阅读企业须知</router-link>
          </h2>
        </center>

      </el-dialog>
    </div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      box: false,
      option: {
        span: 6,
        data: [
          {
            title: "数据大屏",
            src: "images/vip2.png",
            money: "",
            dismoney: "499",
            tip: "/ 永久",
            color: "#ffa820",
            subtext: "获取",
            click: () => {
              this.alert(1);
            },
            list: [
              {
                title: "点击在线体验",
                href: "https://data.avuejs.com",
                check: true
              },
              {
                title: "拖拽即可无需编程就能轻松搭建数据大屏",
                check: true
              },
              {
                title: "多种图表组件支撑多种数据类型的分析展示",
                check: true
              },
              {
                title: "多种数据源接入(接口数据/静态数据)",
                check: true
              },
              {
                title: "图形化的搭建工具，方便快捷",
                check: true
              },
              {
                title: "多分辨率适配发布，满足您不同场合使用",
                check: true
              },
              {
                title: "自定义组件扩展,轻松二次开发",
                check: true
              },
              {
                title: "专属会员群和私人git私服",
                check: true
              },
              {
                title: "优先使用 Avue 新版本",
                check: true
              },
              {
                title: "赠送 avuex-cli脚手架文档",
                href: "https://www.kancloud.cn/smallwei/avue",
                check: true
              }
            ]
          },
          {
            title: "全家桶",
            src: "images/vip3.png",
            color: "#ef4868",
            dismoney: "999",
            tip: "/ 永久",
            subtext: "获取",
            click: () => {
              this.alert(2);
            },
            list: [
              {
                title: "所有产品后期更新和新产品将全部免费",
                check: true,
              },
              {
                title: "专属会员群和私人git私服",
                check: true
              },
              {
                title: "优先使用 Avue 新版本",
                check: true
              }, {
                title: "水印生成器",
                href: "https://canvas.avuejs.com",
                check: true
              },
              {
                title: "包含大屏源码",
                href: "https://data.avuejs.com",
                check: true
              },
              {
                title: "包含后台模版",
                href: "https://cli.avuejs.com",
                check: true
              },
              {
                title: "包含后台模板文档",
                href: "https://www.kancloud.cn/smallwei/avue",
                check: true
              }
            ]
          },
          {
            title: "商业桶",
            src: "images/vip4.png",
            color: "#676ee5",
            dismoney: "1499",
            tip: "/ 永久",
            subtext: "获取",
            click: () => {
              this.alert(3);
            },
            list: [
              {
                title: "全部产品商业授权，无任何限制使用",
                check: true
              },
              {
                title: "提供商业授权文件和发票(包含税点)",
                check: true
              },
              {
                title: "所有产品后期更新和新产品将全部免费",
                check: true
              },
              {
                title: "专属会员群和私人git私服",
                check: true
              },
              {
                title: "优先使用 Avue 新版本",
                check: true
              },
              {
                title: "水印生成器",
                href: "https://canvas.avuejs.com",
                check: true
              },
              {
                title: "表格设计生成器",
                href: "https://crud.avuejs.com",
                check: true
              },
              {
                title: "表单设计生成器",
                href: "https://form.avuejs.com",
                check: true
              },
              {
                title: "包含大屏源码",
                href: "https://data.avuejs.com",
                check: true
              },
              {
                title: "包含后台模版",
                href: "https://cli.avuejs.com",
                check: true
              },
              {
                title: "包含后台模板文档",
                href: "https://www.kancloud.cn/smallwei/avue",
                check: true
              }
            ]
          },
          {
            title: "BladeXAvue联合版",
            src: "images/vip1.png",
            color: "#333",
            dismoney: "3999",
            tip: "/ 永久",
            subtext: "获取",
            click: () => {
              window.location.href = "https://bladex.vip/#/pay?version=3";
            },
            list: [
              {
                title: "包含BladeX企业版所有权益",
                href: "https://bladex.vip/#/vip",
                check: true
              },
              {
                title: "包含Avue商业桶所有权益",
                check: true
              },
              {
                title: "包含发票税点",
                check: true
              },
              {
                title: "产品总价享受8.5折优惠",
                check: true
              },
              {
                title: "框架使用问题优先解答",
                check: true
              }
            ]
          },
        ]
      },
    };
  },
  methods: {
    alert (version) {
      this.$router.push({
        path: '/pay',
        query: {
          version: version
        }
      })
    }
  }
};
</script>

<style lang="scss">
.vip {
  padding-top: 80px;
  &-box {
    padding-top: 10px;
  }
  &-content {
    margin: 10px auto;
    width: 90%;
  }
  .title {
    margin-top: 10px;
    text-align: center;
  }
  .avue-data-pay {
    padding-bottom: 30px;
  }
  .avue-data-pay .item {
    width: 94%;
    min-height: 680px;
  }
  .avue-data-pay .list-item {
    margin-bottom: 7px;
    font-size: 12px;
    padding: 0 20px;
    line-height: 25px;
    a {
      color: #515a6e;
    }
  }
}
</style>
